<template>
  <div class="good-page-good-info-outer">
      <a-row justify="space-between" style="margin-top: 20px">
        <a-col :xs="24" :lg="12" :sm="12" v-if="goodInfo!=null&&goodInfo.subImages!=null&&goodInfo.subImages.length>0">
          <swiper
              v-if="firstSwiper!=null"
              :navigation="true"
              :thumbs="{ swiper: firstSwiper }"
              effect="coverflow"
              :loop="true"
              style="border-radius: 0.8em;width: 100%"
              :slidesPerView="'auto'"
              :grabCursor="true" :centeredSlides="true"
              :autoplay='{
              "delay": 2500,
              "disableOnInteraction": false
            }'

          >
            <swiper-slide v-for="subImages in goodInfo.subImages">
              <!--            <img src="https://secure.img1-fg.wfcdn.com/im/87939861/resize-h800-w800%5Ecompr-r85/6084/60846978/Moze+3%22+x+12%22+Straight+Edge+Ceramic+Singular+Subway+Tile.jpg" align="center"-->
              <!--                 style="width: 100%;border-radius: 0.8em;">-->
              <img :src="subImages" align="center"
                   style="width: 100%;border-radius: 0.8em;">
              <!--            <img align="center" style="width: 100%;border-radius: 0.8em;"-->
              <!--                 :src="imgUrl">-->
            </swiper-slide>
          </swiper>
          <swiper
              @swiper="setFirstSwiper"
              style="border-radius: 0.8em;width: 100%"
              :slidesPerView="'auto'"
              :centeredSlides="true"
              :freeMode="true"
              :watchSlidesVisibility="true"
              :watchSlidesProgress="true"

          >
            <swiper-slide v-for="subImages in goodInfo.subImages" style="width: auto">
              <basic-card :padding="false" class="good-img-swiper-slide" :hover-move="false">
                <div style="background-color: #b9ced0;width: 50px;height: 50px;border-radius: 0.8em;">
                  <!--                <img align="center" style="width: 100%;border-radius: 0.8em;"-->
                  <!--                     src="https://secure.img1-fg.wfcdn.com/im/56339080/resize-h56-w56%5Ecompr-r50/6084/60846960/Moze+3%22+x+12%22+Straight+Edge+Ceramic+Singular+Subway+Tile.jpg">-->
                  <img align="center" style="width: 100%;border-radius: 0.8em;"
                       :src="subImages">
                </div>
              </basic-card>


            </swiper-slide>
          </swiper>
        </a-col>
        <a-col :xs="24" :lg="12" :sm="12" v-if="goodInfo!=null&&goodInfo.subImages!=null&&goodInfo.subImages.length>0">
          <div class="good-page-right-bar-outer">
            <div class="good-page-info">
              <div class="good-page-info-title">
                {{ goodInfo.name }}
              </div>
              <div class="good-page-info-order" v-if="goodInfo.producer!=null">
                by {{ goodInfo.producer }}
              </div>
              <div class="good-page-info-price-outer">
                <div style="display: inline-block"
                     v-if="(selectedSpecification==null||selectedSpecification==undefined)&&!isAllSelected">
                  <div class="good-page-info-price" v-if="goodInfo.currentPrice==goodInfo.price">${{ goodInfo.price }}
                  </div>
                  <div class="good-page-info-price sale-now" v-if="goodInfo.currentPrice!=goodInfo.price">
                    ${{ goodInfo.currentPrice }}
                  </div>
                  <div class="good-page-info-price" v-if="goodInfo.currentPrice!=goodInfo.price">-</div>
                  <div class="good-page-info-price sale-now" v-if="goodInfo.currentPrice!=goodInfo.price">
                    ${{ goodInfo.price }}
                  </div>
                  <span class="good-page-info-price-sale-before"
                              v-if="goodInfo.fakePrice!=null">${{ goodInfo.fakePrice }}</span>
                </div>
                <div style="display: inline-block" v-else-if="selectedSpecification==null&&isAllSelected">
                  <div class="good-page-info-price">{{ 'There is no product of this model' }}</div>
                </div>
                <div style="display: inline-block" v-else>
                  <div class="good-page-info-price"
                       v-if="goodInfo.fakePrice==null">
                    ${{ selectedSpecification.price }}
                  </div>
                  <div class="good-page-info-price sale-now"
                       v-else>
                    ${{ nowPrice }}
                  </div>
                  <span class="good-page-info-price-sale-before"
                        v-if="goodInfo.fakePrice!=null">${{ goodInfo.fakePrice }}</span>
                </div>

              </div>
              <div class="good-page-info-any" v-if="goodInfo!=null&&goodInfo.intro!=null">
                <!--              <quill-editor-->
                <!--                  v-model:content="goodInfo.intro"-->
                <!--                  theme="bubble"-->
                <!--                  read-only-->
                <!--                  style="width: 100%;">-->
                <!--              </quill-editor>-->
                <div v-html="goodInfo.intro" class="self-page-info-info-outer">
                </div>
              </div>
            </div>
            <div class="good-page-selection" v-if="!singleSpecification">
              <div style="display: flex;flex-direction: column;align-items: stretch;">
                <div class="good-page-selection-list"
                     style="display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;flex-wrap: nowrap;">
                  <div class="button-font good-page-selection-list-title">
                    <div
                        style="display: inline;background-color: rgb(183 183 183);width: 10px;height: 20px;margin-right: 10px;">
                      &nbsp;
                    </div>
                    type
                  </div>
                  <table>
                    <tbody>
                    <tr v-for="specification in goodInfo.specificationList" style="display: table-row;">
                      <td style="vertical-align: top;">
                        <div class="good-list-font">
                          {{ specification.attributeKey }}
                        </div>
                      </td>
                      <td>
                        <div>
                          <a-radio-group name="primary_type" v-model:value="state.specification[specification.id]"
                                         @change="changeSelection">
                            <a-radio v-for="attributeValue in specification.attributeValueList"
                                     :value="attributeValue.id">
                              <div class="good-list-font">
                                {{ attributeValue.attributeValue }}
                              </div>
                            </a-radio>
                          </a-radio-group>
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                  <!--                <div style="display: inline-block;text-align: center;flex: 0 0 auto;margin-right: 10px">-->
                  <!--                  <div class="good-list-font">-->
                  <!--                    {{ specification.attributeKey }}-->
                  <!--                  </div>-->
                  <!--                </div>-->
                </div>
              </div>
            </div>
            <div class="good-page-actionBar">
              <div style="margin: 10px 0" v-if="selectedSpecification!=null">
                <span  v-if="selectedSpecification.stock!=null">Stock: {{selectedSpecification.stock}} </span>
<!--                <br/><span sv-if="selectedSpecification.maxNumber!=null">Single purchase maximum quantity: {{selectedSpecification.maxNumber}} </span>-->
              </div>
              <a-row justify="space-between" align="middle" :gutter="[0,8]">
                <a-col flex="120px">
                  <basic-number-input v-model="number" style="width: 120px"></basic-number-input>
                </a-col>
                <a-col flex="44px" style="text-align: center">
                  <basic-button underLine="false" class="good-star-outer">
                <span @click.stop="toChangeStarState"
                      @touchstart="starTouchState.start($event)"
                      @touchend="starTouchState.cancel($event)" :class="[...starTouchState.classes]"
                      class="good-star-outer-span">
                  <HeartFilled style="color: #1677ff" v-if="isFavorite" class="good-star"/>
                  <HeartOutlined style="color: #1677ff" v-else class="good-star"/>
                </span>
                  </basic-button>
                </a-col>
                <a-col flex="auto">
                  <div class="good-page-add-button-outer">
                    <basic-button class="show-max-900px"
                                  style="border:1px solid #1677ff;text-align: center;width: 100%;height: 40px;transform: scale(1)"
                                  @click="toAddToCart" :under-line="false">
                  <span class="button-font">
                    Add To Cart
                  </span>
                    </basic-button>
                    <basic-button class="show-min-900px"
                                  style="border:1px solid #1677ff;text-align: center;width: calc(50% - 5px);height: 40px;transform: scale(1)"
                                  @click="toAddToCart" :under-line="false"
                    >
                  <span class="button-font">
                    Add To Cart
                  </span>
                    </basic-button>
                    <basic-button class="show-min-900px"
                                  style="text-align: center;width: calc(50% - 5px);height: 40px;transform: scale(1)"
                                  @click="toBuyThisOnly" :under-line="false"
                                  inverseColor="true">
                  <span class="button-font">
                    Buy It Now
                  </span>
                    </basic-button>

                  </div>
                </a-col>
                <a-col :span="24" class="show-max-900px">
                  <basic-button style="text-align: center;width: 100%;height: 40px;transform: scale(1)"
                                @click="toBuyThisOnly"
                                inverseColor="true">
                  <span class="button-font">
                    Buy It Now
                  </span>
                  </basic-button>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :lg="22" :sm="22" v-if="goodInfo!=null&&(goodInfo.subImages==null||goodInfo.subImages.length==0)">
          <div class="good-page-right-bar-outer">
            <div class="good-page-info">
              <div class="good-page-info-title">
                {{ goodInfo.name }}
              </div>
              <div class="good-page-info-order" v-if="goodInfo.producer!=null">
                by {{ goodInfo.producer }}
              </div>
              <div class="good-page-info-price-outer">
                <div style="display: inline-block"
                     v-if="(selectedSpecification==null||selectedSpecification==undefined)&&!isAllSelected">
                  <div class="good-page-info-price" v-if="goodInfo.currentPrice==goodInfo.price">${{ goodInfo.price }}
                  </div>
                  <div class="good-page-info-price sale-now" v-if="goodInfo.currentPrice!=goodInfo.price">
                    ${{ goodInfo.currentPrice }}
                  </div>
                  <div class="good-page-info-price" v-if="goodInfo.currentPrice!=goodInfo.price">-</div>
                  <div class="good-page-info-price sale-now" v-if="goodInfo.currentPrice!=goodInfo.price">
                    ${{ goodInfo.price }}
                  </div><span class="good-page-info-price-sale-before"
                              v-if="goodInfo.fakePrice!=null">${{ goodInfo.fakePrice }}</span>
                </div>
                <div style="display: inline-block" v-else-if="selectedSpecification==null&&isAllSelected">
                  <div class="good-page-info-price">{{ 'There is no product of this model' }}</div>
                </div>
                <div style="display: inline-block" v-else>
                  <div class="good-page-info-price"
                       v-if="goodInfo.fakePrice==null">
                    ${{ selectedSpecification.price }}
                  </div>
                  <div class="good-page-info-price sale-now"
                       v-else>
                    ${{ nowPrice }}
                  </div>
                  <span class="good-page-info-price-sale-before"
                        v-if="goodInfo.fakePrice!=null">${{ goodInfo.fakePrice }}</span>
                </div>

              </div>
              <div class="good-page-info-any" v-if="goodInfo!=null&&goodInfo.intro!=null">
                <!--              <quill-editor-->
                <!--                  v-model:content="goodInfo.intro"-->
                <!--                  theme="bubble"-->
                <!--                  read-only-->
                <!--                  style="width: 100%;">-->
                <!--              </quill-editor>-->
                <div v-html="goodInfo.intro" class="self-page-info-info-outer">
                </div>
              </div>
            </div>
            <div class="good-page-selection" v-if="!singleSpecification">
              <div style="display: flex;flex-direction: column;align-items: stretch;">
                <div class="good-page-selection-list"
                     style="display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;flex-wrap: nowrap;">
                  <div class="button-font good-page-selection-list-title">
                    <div
                        style="display: inline;background-color: rgb(183 183 183);width: 10px;height: 20px;margin-right: 10px;">
                      &nbsp;
                    </div>
                    type
                  </div>
                  <table>
                    <tbody>
                    <tr v-for="specification in goodInfo.specificationList" style="display: table-row;">
                      <td style="vertical-align: top;">
                        <div class="good-list-font">
                          {{ specification.attributeKey }}
                        </div>
                      </td>
                      <td>
                        <div>
                          <a-radio-group name="primary_type" v-model:value="state.specification[specification.id]"
                                         @change="changeSelection">
                            <a-radio v-for="attributeValue in specification.attributeValueList"
                                     :value="attributeValue.id">
                              <div class="good-list-font">
                                {{ attributeValue.attributeValue }}
                              </div>
                            </a-radio>
                          </a-radio-group>
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                  <!--                <div style="display: inline-block;text-align: center;flex: 0 0 auto;margin-right: 10px">-->
                  <!--                  <div class="good-list-font">-->
                  <!--                    {{ specification.attributeKey }}-->
                  <!--                  </div>-->
                  <!--                </div>-->
                </div>
              </div>
            </div>
            <div class="good-page-actionBar">
              <div style="margin: 5px 0" v-if="selectedSpecification!=null">
                <span  v-if="selectedSpecification.stock!=null">Stock: {{selectedSpecification.stock}} </span>
              </div>
              <a-row justify="space-between" align="middle" :gutter="[0,8]">
                <a-col flex="120px">
                  <basic-number-input v-model="number" style="width: 120px"></basic-number-input>
                </a-col>
                <a-col flex="44px" style="text-align: center">
                  <basic-button underLine="false" class="good-star-outer">
                <span @click.stop="toChangeStarState"
                      @mouseover="starTouchState.start($event)"
                      @mouseout.prevent="starTouchState.cancel($event)"
                      @touchstart="starTouchState.start($event)"
                      @touchend="starTouchState.cancel($event)" :class="[...starTouchState.classes]"
                      class="good-star-outer-span">
                  <HeartFilled style="color: #1677ff" v-if="isFavorite" class="good-star"/>
                  <HeartOutlined style="color: #1677ff" v-else class="good-star"/>
                </span>
                  </basic-button>
                </a-col>
                <a-col flex="auto">
                  <div class="good-page-add-button-outer">
                    <basic-button class="show-max-900px"
                                  style="border:1px solid #1677ff;text-align: center;width: 100%;height: 40px;transform: scale(1)"
                                  @click="toAddToCart" :under-line="false">
                  <span class="button-font">
                    Add To Cart
                  </span>
                    </basic-button>
                    <basic-button class="show-min-900px"
                                  style="border:1px solid #1677ff;text-align: center;width: calc(50% - 5px);height: 40px;transform: scale(1)"
                                  @click="toAddToCart" :under-line="false"
                    >
                  <span class="button-font">
                    Add To Cart
                  </span>
                    </basic-button>
                    <basic-button class="show-min-900px"
                                  style="text-align: center;width: calc(50% - 5px);height: 40px;transform: scale(1)"
                                  @click="toBuyThisOnly" :under-line="false"
                                  inverseColor="true">
                  <span class="button-font">
                    Buy It Now
                  </span>
                    </basic-button>

                  </div>
                </a-col>
                <a-col :span="24" class="show-max-900px">
                  <basic-button style="text-align: center;width: 100%;height: 40px;transform: scale(1)"
                                @click="toBuyThisOnly"
                                inverseColor="true">
                  <span class="button-font">
                    Buy It Now
                  </span>
                  </basic-button>
                </a-col>
              </a-row>
            </div>
          </div>
        </a-col>
      </a-row>

  </div>
  <div class="good-page-detailed-description-outer" v-if="goodInfo!=null&&goodInfo.details!=null">
    <div class="good-page-detailed-description-title good-page-info-title">
      Detailed Description
    </div>
    <div class="good-page-detailed-description" v-if="goodInfo!=null&&goodInfo.details!=null">
      <!--      <quill-editor-->
      <!--          v-model:content="goodInfo.details"-->
      <!--          theme="bubble"-->
      <!--          read-only-->
      <!--          style="width: 100%;">-->
      <!--      </quill-editor>-->
      <!--      <basic-editor :value="goodInfo.details"></basic-editor>-->
      <div v-html="goodInfo.details" class="self-page-info-info-outer"></div>
    </div>

  </div>
  <div class="good-page-similar-items-outer" v-if="randomGoodList.list1!=null&&randomGoodList.list1.length>0">
    <div class="good-page-similar-items-title good-page-info-title">
      Compare Similar Items
    </div>
    <div class="good-page-similar-items">
      <swiper
          :navigation="true"
          style="border-radius: 0.8em;width: 100%"
          :slidesPerView="'auto'"
          :autoplay='{
                      "delay": 2500,
                      "disableOnInteraction": false
                  }'
      >
        <swiper-slide v-for="good in randomGoodList.list1" style="width: auto">
          <div
              class="good-page-similar-items-swiper-slide-card-outer good-page-other-good-card good-page-swiper-slide-card-outer">
            <good-card @click="toRoute(good.id)" style="cursor: pointer"
                       :goodInfo="good"></good-card>

          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
  <div class="good-page-shop-this-collection-outer" v-if="randomGoodList.list2!=null&&randomGoodList.list2.length>0">
    <div class=" good-page-info-title">
      Shop This Collection
    </div>
    <div class="good-page-similar-items">
      <swiper
          :navigation="true"
          style="border-radius: 0.8em;width: 100%"
          :slidesPerView="'auto'"
          :autoplay='{
                      "delay": 2500,
                      "disableOnInteraction": false
                  }'
      >
        <swiper-slide v-for="good in randomGoodList.list2" style="width: auto;">
          <div
              class="good-page-shop-this-collection-swiper-slide-card-outer good-page-other-good-card good-page-swiper-slide-card-outer">
            <good-card @click="toRoute(good.id)" class="good-page-other-good-card" :show-word="false" style="cursor: pointer"
                       :goodInfo="good"></good-card>

          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import {defineComponent, ref, reactive, computed, onMounted,getCurrentInstance} from "vue";
import {useRouter, useRoute,onBeforeRouteUpdate} from "vue-router";
import {useStore} from "vuex";
//@ts-ignored
import {Swiper, SwiperSlide} from "swiper/vue";
import SwiperCore, {Controller, Thumbs, Navigation} from "swiper";

import {HeartOutlined, HeartFilled} from '@ant-design/icons-vue';
import {searchGoodById, searchGoodByRandom, searchGoodSpecificationInfo} from "../../api/GoodRequest";
import {addFavorite, deleteFavorite} from "../../api/FavoriteRequest";
import {notification} from 'ant-design-vue'
import {addCart} from "../../api/CartRequest";

SwiperCore.use([Controller, Thumbs, Navigation])
import 'swiper/swiper-bundle.min.css'
import {isPhone} from "../../utils/isPhone";


export default defineComponent({
  name: "Good",
  components: {
    Swiper, SwiperSlide, HeartOutlined,
    HeartFilled
  },
  setup(props, context) {
    const route = useRoute();
    const store = useStore();
    const router = useRouter()

    const id = ref(route.params.id);

    const firstSwiper = ref(null);
    const secondSwiper = ref(null);

    const setFirstSwiper = (swiper) => {
      firstSwiper.value = swiper;
    }
    const setSecondSwiper = (swiper) => {
      secondSwiper.value = swiper;
    }

    // const content = ref(JSON.parse('{"ops":[{"insert":"q1111"},{"attributes":{"color":"#008a00"},"insert":"1113131313131"},{"attributes":{"italic":true},"insert":"qq"},{"attributes":{"strike":true,"italic":true},"insert":"qedq饿2饿d"},{"attributes":{"italic":true},"insert":"q若2让"},{"insert":"让"},{"attributes":{"background":"#e60000"},"insert":"qdqdqdq"},{"attributes":{"background":"#e60000","color":"#e60000"},"insert":"11饿"},{"insert":"\\ntheme=\\"bubble\\""},{"attributes":{"code-block":true},"insert":"\\n"},{"insert":"read-only"},{"attributes":{"code-block":true},"insert":"\\n"},{"insert":"\\n"}]}'));

    const loading=ref(false);

    const toRefreshGoodById = async () => {
      loading.value=true;
      await searchGoodById(id.value).then(async (res) => {

        res.data.result.goods[0].subImages=JSON.parse(res.data.result.goods[0].subImages)
        goodInfo.value = res.data.result.goods[0]
        document.title=goodInfo.value.name
        // goodInfo.value.details = JSON.parse(goodInfo.value.details)
        // goodInfo.value.intro = JSON.parse(goodInfo.value.intro)
        if (res.data.result.goodsSpecifications == null) res.data.result.goodsSpecifications = []
        goodsSpecifications.value = res.data.result.goodsSpecifications



        isFavorite.value = res.data.result.isFavorite
        maxPrice.value = res.data.result.maxPrice
        minPrice.value = res.data.result.minPrice
      }).catch(() => {
        router.push({
          path: '/'
        })
        loading.value=false;
      })
      if (goodInfo.value != null &&
          goodInfo.value.specificationList != null
      ) {
        if(goodInfo.value.specificationList.length === 1 &&
            goodInfo.value.specificationList[0].attributeValueList != null &&
            goodInfo.value.specificationList[0].attributeValueList.length === 1){
          state.specification[goodInfo.value.specificationList[0].id] =  goodInfo.value.specificationList[0].attributeValueList[0].id
          changeSelection();
        }else{
          for (let i = 0; i < goodInfo.value.specificationList.length; i++) {
            state.specification[goodInfo.value.specificationList[i].id] =  goodInfo.value.specificationList[i].attributeValueList[0].id
          }
          changeSelection()
        }
      }
      loading.value=false;
    }

    const maxPrice = ref(0);
    const minPrice = ref(0);

    const randomGoodList = reactive({
      list1: [],
      list2: []
    })

    onMounted(() => {
      toRefreshGoodById();
      searchGoodByRandom(12).then((res) => {
        randomGoodList.list1 = res.data.result
      })
      searchGoodByRandom(12).then((res) => {
        randomGoodList.list2 = res.data.result
      })
    })
    // onBeforeRouteUpdate(()=>{
    //   toRefreshGoodById();
    //   searchGoodByRandom(12).then((res) => {
    //     randomGoodList.list1 = res.data.result
    //   })
    //   searchGoodByRandom(12).then((res) => {
    //     randomGoodList.list2 = res.data.result
    //   })
    // })

    const goodsSpecifications = ref([]);
    const goodInfo = ref(null);
    const isFavorite = ref(false)

    const number = ref(0);

    const starTouchState = reactive({
      classes: isPhone()?[]:['good-card-star-outer-can-hover'],
      start($event) {
        if(isPhone()){
          starTouchState.classes.push('good-card-star-outer-hover-isPhone');
        }

      },
      cancel($event) {
        if (isPhone()) {
          starTouchState.classes = [];
        }

      }
    })
    const toChangeStarState = async () => {
      if (isFavorite.value) {

        await deleteFavorite(goodInfo.value.id).then(res=>{
          isFavorite.value = false
          notification.success({
            message: 'Cancel collection successfully'
          })
        }).catch((res)=>{
          notification.warning({
            message: res.data.message
          })
        })
      } else {

        await addFavorite(goodInfo.value.id).then(res=>{
          isFavorite.value = true
          notification.success({
            message: 'Collection successful'
          })
        }).catch((res)=>{
          notification.warning({
            message: res.data.message
          })
        })
      }

      toRefreshGoodById();

    }

    const value = ref('');

    const state = reactive({
      specification: {}
    })

    const isAllSelected = computed(() => {
      if (goodInfo.value == null) return false;
      if (goodInfo.value.specificationList == null) return false;
      for (let i = 0; i < goodInfo.value.specificationList.length; i++) {
        console.log(goodInfo.value.specificationList[i],state.specification[goodInfo.value.specificationList[i].id])
        if (state.specification[goodInfo.value.specificationList[i].id] == null || state.specification[goodInfo.value.specificationList[i].id] === undefined) {
          return false;
        }
      }
      return true
    })

    const singleSpecification = computed(() => {
      return goodInfo.value != null &&
          goodInfo.value.specificationList != null &&
          goodInfo.value.specificationList.length === 1 &&
          goodInfo.value.specificationList[0].attributeValueList != null &&
          goodInfo.value.specificationList[0].attributeValueList.length === 1;

    })

    const changeSelection = () => {
      if (goodInfo.value == null) return;
      if (!isAllSelected.value) return;

      let data = []
      for (let specificationKey in state.specification) {
        data.push({
          key: specificationKey,
          value: state.specification[specificationKey]
        })
      }
      searchGoodSpecificationInfo(data).then((res) => {
        if (res.data.result == null) {
          selectedSpecification.value = null;
          return;
        } else {
          res.data.result.GoodsSpecification.numPriceList = res.data.result.numPriceList
          selectedSpecification.value = res.data.result.GoodsSpecification;
        }
      })
    }

    const selectedSpecification = ref();
    const toRoute = (goodId) => {
      if (goodId == null) return;
      const { href } = router.resolve({
        name: '商品页面',
        params: {
          id: goodId
        }
      })
      window.open(href, "_blank");
    }


    const toAddToCart = () => {
      if (selectedSpecification.value == null) {
        notification.warning({
          message: 'Please select the corresponding model'
        })
        return;
      }
      if (number.value <= 0) {
        notification.warning({
          message: 'Please enter the quantity to add to the shopping cart'
        })
        return;
      }
      addCart({
        goodId: selectedSpecification.value.goodsId,
        specificationId: selectedSpecification.value.id,
        number: number.value
      }).then((res) => {
        if (res.data.result != undefined && res.data.result.cartList != null) {
          for (let i = 0; i < res.data.result.cartList.length; i++) {
            //@ts-ignored
            res.data.result.cartList[i].good.specification.specification = JSON.parse(res.data.result.cartList[i].good.specification.specification)
          }
        }
        store.commit('SET_GLOBAL_INFO', {
          cartInfo: res.data.result
        })
        notification.success({
          message: 'Added successfully'
        })
      })
    }

    const nowPrice = computed(() => {
      if (goodInfo.value == null) return null;
      if (selectedSpecification.value == null) return null;
      let price = selectedSpecification.value.price;
      let num = 0;
      selectedSpecification.value.numPriceList.forEach((val) => {
        if (val.number >= num && number.value >= val.number) {
          num = val.number
          price = val.realPrice
        }
      })
      return price;
    })

    const toBuyThisOnly = () => {
      if (selectedSpecification.value == null) {
        notification.warning({
          message: 'Please select the corresponding model'
        })
        return;
      }
      if (number.value <= 0) {
        notification.warning({
          message: 'Please enter the quantity to add to the shopping cart'
        })
        return;
      }

      router.push({
        name: '提交订单页面',
        query: {
          goodId: id.value,
          type:1,
          specificationId: selectedSpecification.value.id,
          number: number.value
        }
      })

    }

    return {
      toBuyThisOnly,
      nowPrice,
      selectedSpecification,
      value,
      toRoute,
      state,
      id,
      maxPrice,
      minPrice,
      number,
      toAddToCart,
      randomGoodList,
      firstSwiper,
      secondSwiper,
      setFirstSwiper,
      setSecondSwiper,
      starTouchState,
      toChangeStarState,
      goodsSpecifications,
      goodInfo,
      loading,
      isFavorite,
      isAllSelected,
      changeSelection,
      singleSpecification
    }
  }
})
</script>

<style lang="less">
.swiper-slide-thumb-active {
  .basic-card-inside {
    border: 2px solid #1364f1 !important;
  }
}

.swiper-slide {
  .basic-card-inside {
    border: 2px solid white;
  }
}

.button-font {
  font-size: 18px;
  @media screen and ( max-width: 768px ) {
    font-size: 15px;
  }
}

.show-max-425px {
  @media screen and (min-width: 426px) {
    display: none !important;
  }
}

.show-min-425px {
  @media screen and (max-width: 425px) {
    display: none !important;
  }
}

.show-max-900px {
  @media screen and (min-width: 901px) {
    display: none !important;
  }
}

.show-min-900px {
  @media screen and (max-width: 900px) {
    display: none !important;
  }
}

.good-page-info-title {
  font-size: 32px;


  @media screen and (max-width: 576px) {
    font-size: 28px;
  }
  @media screen and (max-width: 500px) {
    font-size: 24px;
  }
  @media screen and (max-width: 450px) {
    font-size: 22px;
  }
  @media screen and (max-width: 400px) {
    font-size: 20px;
  }

  font-weight: bold;
}

* {
  word-break: break-all;
}

.good-page-info {

  * {
    line-height: 1.42;
  }


  .good-page-info-order {

  }

  .good-page-info-price-outer {
    padding-top: 3px;
    font-size: 30px;

    @media screen and (max-width: 576px) {
      font-size: 27px;
    }
    @media screen and (max-width: 500px) {
      font-size: 23px;
    }
    @media screen and (max-width: 450px) {
      font-size: 21px;
    }
    @media screen and (max-width: 400px) {
      font-size: 19px;
    }


    margin-bottom: 10px;

    .good-page-info-price {
      margin-right: 5px;
      display: inline-block;
    }

    .sale-now {
      color: #c4113f;
    }

    .good-page-info-price-sale-before {
      text-decoration: line-through;
      font-size: 16px;

      @media screen and (max-width: 450px) {
        font-size: 15px;
      }
      @media screen and (max-width: 400px) {
        font-size: 14px;
      }

      color: #646266;
    }

  }
}

.ql-container {
  .ql-editor {
    padding: 0;
  }
}

.good-page-selection {
  padding: 0 0 10px 0;
}

.good-page-right-bar-outer {

  padding: 0 0 0 20px;
  @media screen and (max-width: 768px) {
    padding: 0 0 0 0;
  }
}

.good-page-add-button-outer {
  margin-left: 6px;
  display: flex;
  justify-content: space-between;
}

.good-page-actionBar {

  .good-star-outer-hover {
    background-color: #1677ff !important;

    .good-star {
      color: white !important;
    }
  }
  .good-card-star-outer-can-hover {
  }
  .good-card-star-outer-can-hover:hover {
    background-color: #1677ff !important;
    .good-card-star {
      color: white !important;
    }
  }
  .good-card-star-outer-hover-isPhone{
    background-color: #1677ff !important;
    .good-card-star {
      color: white !important;
    }
  }

  .good-star-outer {
    width: 40px;
    height: 40px;
    padding: 0 !important;



    .good-star-outer-span {
      background-color: white;
      transition: all .18s cubic-bezier(.22, .61, .36, 1);
      line-height: 0;
      font-size: 0;

      * {
        transition: all .18s cubic-bezier(.22, .61, .36, 1);
      }

      display: inline-flex;
      border: 2px solid #1677ff;
      border-radius: 20px;

      .good-star {
        margin: 6px;
        font-size: 24px;
      }
    }
  }
}

.good-page-detailed-description-outer {
  padding: 10px;
  border-top: 0.1px solid rgb(223, 223, 225);
  border-bottom: 0.1px solid rgb(223, 223, 225);
}

.good-page-detailed-description {
  margin-top: 10px;
}

.good-page-similar-items-outer {
  padding: 10px;
  border-bottom: 0.1px solid rgb(223, 223, 225);

}

.good-page-shop-this-collection-outer {
  padding: 10px;
  border-bottom: 0.1px solid rgb(223, 223, 225);
}

.good-page-other-good-card {
  &.good-page-swiper-slide-card-outer {
    width: 250px;
    @media screen and (max-width: 992px) {
      width: 200px;
    }

    @media screen and (max-width: 576px) {
      width: 150px;
    }
  }
}

.good-page-good-info-outer {
  padding: 10px;
}

.good-list-font {
  display: inline-block;
  font-size: 16px;
  white-space: nowrap;
  line-height: 31.2px;
  @media screen and (max-width: 768px) {
    font-size: 14px;
    line-height: 24.8px;
  }
  @media screen and (max-width: 576px) {
    font-size: 13px;
    line-height: 25.6px;
  }

}

.good-page-selection-list {
  border-top: 1px solid #f0f0f0;
  padding: 10px 5px 0 0;
}
.self-page-info-info-outer{
  img{
    max-width: calc( 100vw - 26px);
    height: unset!important;
    object-fit: contain;
  }
}
</style>
